<!--
  * 表格组件 支持按列显示
-->
<template>
  <el-card>
    <el-row type="flex" justify="end">
      <el-button @click="showCell" type="success">编辑可显示列</el-button>
    </el-row>

    <el-table
      :data="tableData"
      border
      stripe
      :key="Math.random()"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-table-column
        v-for="(column, index) in cellSelected" :key="index"
        :prop="column.prop"
        :label="column.label"
        align="center"
      >
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="180px">
        <template #default="{ row }">
          <slot :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <!--    编辑列显示弹窗-->
    <cellTransferComponent ref="cellTransferComponent" @update:selectedColumns="handleSelectedColumns"></cellTransferComponent>

  </el-card>

</template>

<script>
import cellTransferComponent from "@/views/components/cellTransferComponent.vue";

export default {
  name: 'BaseTable',
  components: { cellTransferComponent },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    cellAll: {
      type: Array,
      default: () => [],
    },
    border: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cellSelected: [{label: '区域', prop: 'region'}]
    }
  },
  mounted() {
    // console.log(this.cellAll, '接受的全部的单元格list');
    // console.log(this.tableData, '表格组件接收的信息');
  },
  methods: {
    //打开编辑列弹窗
    showCell() {
      this.$refs.cellTransferComponent.showCellTransferDialog(this.cellSelected)
    },
    //更新列信息
    handleSelectedColumns(selectedColumns) {
      console.log(selectedColumns, '传递过来的');
      this.cellSelected = selectedColumns
    },



    handleSelectionChange(selection) {
      this.$emit('selection-change', selection);
    },
  },
};
</script>

<style scoped>
/* 可以根据需要添加一些样式 */
</style>
